<template>
	<view class="profile-picture-container">
		<image :src="user.logo" class="profile-picture"></image>
	</view>

	<view style="padding: 5%;">
		<uni-section title="昵称" type="line"><uni-easyinput v-model=" UserInfo.nickname "
				placeholder="请输入用户昵称"></uni-easyinput></uni-section>

		<uni-section title="QQ" type="line"><uni-easyinput v-model=" UserInfo.qq "
				placeholder="请输入QQ号"></uni-easyinput></uni-section>

		<uni-section title="微信" type="line"><uni-easyinput v-model=" UserInfo.wechat "
				placeholder="请输入微信账号"></uni-easyinput></uni-section>

		<uni-section title="自我简介" type="line"><uni-easyinput v-model=" UserInfo.info "
				placeholder="请输入自我简介"></uni-easyinput></uni-section>

		<uni-section title="性别" type="line"><uni-easyinput v-model=" UserInfo.sex " placeholder="性别"
				class="sexdata"></uni-easyinput>

			<uni-data-checkbox selectedColor="red" v-model=" UserInfo.sex " :localdata="sex"></uni-data-checkbox>

		</uni-section>

		<button @click="toMy" type="primary" size="base" class="button">返回我的</button>
		<button @click="Infoput" type="warn" size="base" class="button1">保存修改</button>
	</view>


	<view>
		<text class="bottom-text">个人头像暂不支持在此修改！请前往
			<uni-link href="https://ui.huhuiyu.top" text="https://ui.huhuiyu.top"></uni-link>进行登录后修改
		</text>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeUnmount
	} from 'vue'
	import {
		api,
		tools
	} from '../../api/api.js'

	import userstore from '../../store/user.js'
	const {
		update
	} = userstore();

	import {
		storeToRefs
	} from 'pinia'

	const toMy = (page) => {
		uni.switchTab({
			url: '/pages/my/my'
		});
	}

	const {
		isLogin,
		user
	} = storeToRefs(userstore())

	const sex = ref([{
			text: '男',
			value: 'm'
		},
		{
			text: '女',
			value: 'f'
		},
		{
			text: '保密',
			value: 'n'
		},
		{
			text: '武装直升机',
			value: 1,
			disable: true
		},
		{
			text: '沃尔玛购物袋',
			value: 2,
			disable: true
		},
		{
			text: '外星人',
			value: 3,
			disable: true
		}
	]);

	const UserInfo = ref({
		nickname: user.value.tbUserInfo.nickname,
		sex: user.value.tbUserInfo.sex,
		qq: user.value.tbUserInfo.qq,
		wechat: user.value.tbUserInfo.wechat,
		info: user.value.tbUserInfo.info
	});

	const Infoput = () => {
		api.put('/user', UserInfo.value, (data) => {
			if (data.success) {
				uni.showToast({
					title: data.message,
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: data.message,
					icon: 'none'
				});
			}
			update();
		});
	};
</script>

<style>
	.profile-picture-container {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.profile-picture {
		width: 200px;
		height: 200px;
		border-radius: 50%;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	.sexdata {
		display: none;
	}

	.bottom-text {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: center;
		padding: 10px;
		color: white;
		background-color: #ffaa7f;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	.button {
		border: none;
		border-radius: 4px;
		font-size: 14px;
		transition: background-color 0.3s;
		margin-top: 18%;
	}

	.button1 {
		border: none;
		border-radius: 4px;
		font-size: 14px;
		transition: background-color 0.3s;
	}
</style>